import React from 'react';

import './static/css/user.css';
import {Link,browserHistory} from 'react-router';
import $ from 'jquery';

class UserName extends React.Component{
    constructor(props){
        super(props);
		this.state={
			tel:JSON.parse(sessionStorage.getItem("user_info")).tel,
			username:JSON.parse(sessionStorage.getItem("user_info")).username
		}
    }
	componentDidMount(){
		$(".layout").click(function(){
			sessionStorage.removeItem("user_info");  //点击退出时清除本地存储中的用户信息
			browserHistory.push('Mine');  //js路由跳转
		})
	}
	
    render(){
        return(
            <div>
            <div id="userHeader">
			 <div className="headerTop">
			 	<h3>我的</h3>
				<p className="layout">退出</p>
			 	<h4>
			 		<i className="iconfont">&#xe65f;</i>
			 		<i className="iconfont ">&#xe6bd;</i>
			 	</h4>
			 </div>
			 <div className="headerBot">
			 	 <h3><i className="iconfont">&#xe60f;</i></h3>
			 	 <div className="promptlyLogin">
			 	 	  <a href="#">{this.state.username}</a>
			 	 	  <p>{this.state.tel}</p>
			 	 	  <span>></span>
			 	 </div>	
			 </div>
		</div>

        <div className="liststyle">
        	<ul className="list">
        		<li>
        			<a href="#">
        				 <p className="lef">0.00元</p>
        				 <h6>钱包</h6>
        			</a>  			
        		</li>
        		<li>
        			<a href="#">
        				  <p className="mid">0个</p>
        				 <h6>优惠</h6>
        			</a>  			
        		</li>
        		<li className="right">
        			<a href="#">
        				 <p className="rig">0分</p>
        				 <h6>积分</h6>
        			</a>  			
        		</li>
        	</ul>
        	<div className="kong"></div>
        </div>

        <div className="memberCenter">
        		<div className="project">
		         		<a href="#">
			         		<i className="iconfont one">&#xe607;</i>　
			         		<span>收货地址</span>
		         		</a>
		         </div>
		         <div className="project ">
		         		<Link to="/Collection" className="bottomSoild">
			         		<i className="iconfont two">&#xe642;</i>　
			         		<span>我的收藏</span>
		         		</Link>
		         </div>
		         <div className="kong"></div>
	
                 <div className="project">
		         		<a href="#">
			         		<i className="iconfont three">&#xe65a;</i>　
			         		<span>推荐有奖</span>
			         		<p>5元现金</p>
		         		</a>
		         </div>
		          <div className="project ">
		         		<a href="#" className="bottomSoild">
			         		<i className="iconfont five">&#xe681;</i>　
			         		<span>积分商城</span>
			         		<p>0元好物在这里</p>
		         		</a>
		         </div>
		         <div className="project ">
		         		<a href="#">
			         		<i className="iconfont four">&#xe60b;</i>　
			         		<span>饿了么会员卡</span>
			         		<p>未开通</p>
		         		</a>
		         </div>
		         
		         <div className="kong"></div>         
        </div>
    </div>
        )
    }
        
}

export default UserName;